<template>
  <div>
    <div class="m-2">
      <ElButton @click="[(code = 'submit'), (visviableDialog = true)]">添加角色</ElButton>
    </div>
    role
    <el-scrollbar height="calc(100vh - 101px)">
      <ElTable :data="pageData.list" class="w-[100%]" border>
        <ElTableColumn prop="id" label="ID" width="80px" align="center"></ElTableColumn>
        <ElTableColumn prop="name" label="角色名称" align="center"></ElTableColumn>
        <ElTableColumn prop="introduction " label="账号介绍" align="center">
          <template #default="{ row }">
            {{ row.introduction ? row.introduction : '暂无介绍' }}
          </template>
        </ElTableColumn>
        <ElTableColumn prop="introduction " width="350" show-overflow-tooltip label="唯一标志" align="center">
          <template #default="{ row }">
            {{ row.roleKey }}
          </template>
        </ElTableColumn>
        <ElTableColumn prop="status" label="账号状态" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.status" type="success" @click="toggleDisable(row)">正常</el-tag>
            <el-tag v-else type="danger" @click="toggleDisable(row)">禁用</el-tag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" align="center">
          <template #default="{ row }">
            <ElButton @click="[(visviableDialog = true), (formData = row), (code = 'change')]"
              >编辑</ElButton
            >
            <ElButton type="danger" @click="deleteRole(row.id)">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <!-- 分页器 -->
      <ElPagination
        :current-page="pageData.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        class="mt-2 float-right mr-5"
        @size-change="sizeChange"
        @current-change="currentChange"
      ></ElPagination>
    </el-scrollbar>
    <!-- 添加修改角色弹窗 -->
    <ElDialog v-model="visviableDialog" :title="code == 'submit' ? '添加角色' : '编辑角色'">
      <ElForm v-model="formData">
        <ElFormItem label="角色名称">
          <ElInput v-model="formData.name" />
        </ElFormItem>
        <ElFormItem label="角色介绍">
          <ElInput v-model="formData.introduction" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <ElButton @click="visviableDialog = false">取消</ElButton>
        <ElButton type="primary" @click="submit">提交</ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<script setup>
const useApi = useUserApi()
const roleApi = useroleApi()
const formData = ref({})
const code = ref('')
const visviableDialog = ref(false)
//用户列表
const pageData = ref({
  list: [],
  total: 100,
  page: 1,
  pageSize: 10
})
//提交
const submit = () => {
  if (code.value == 'submit') {
    roleApi.createRole(formData.value).then(() => {
      visviableDialog.value = false
      getRoleList()
      return successElMessageBox('提交成功')
    })
  } else {
    roleApi.updateRole(formData.value).then(() => {
      visviableDialog.value = false
      getRoleList()
      successElMessageBox('修改成功')
    })
  }
}
//删除角色
const deleteRole = (id) => {
  ElMessageBox.confirm('是否确认删除', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      roleApi.deleteRole(id).then(() => {
        getRoleList()
        successElMessageBox('删除成功')
      })
    })
    .catch(() => {
      errorElMessageBox()
    })
}

//更改角色状态
const toggleDisable = (row) => {
  roleApi
    .updateRoleStatus({
      id: row.id,
      status: 0
    })
    .then((res) => {
      console.log(res)
      getRoleList()
      successElMessageBox('修改成功')
    })
}

//获取角色列表
useApi.getRoleList().then((res) => {
  pageData.value.total = res.count
  // console.log(res);
})
onMounted(() => {
  getRoleList()
})

const getRoleList = () => {
  useApi
    .getRoleList({
      page: pageData.value.page,
      limit: pageData.value.pageSize
    })
    .then((res) => {
      pageData.value.list = res.rows
    })
}

//分页器·
const sizeChange = (val) => {
  pageData.value.pageSize = val
  getRoleList()
}
const currentChange = (val) => {
  pageData.value.page = val
  getRoleList()
}
//发送弹框
const errorElMessageBox = () => {
  ElMessage({
    type: 'error',
    message: '已取消'
  })
}
const successElMessageBox = (res) => {
  ElMessage({
    type: 'success',
    message: res
  })
}
</script>

<style lang="scss" scoped></style>
